<script src="../../main.js"></script>
<template>
  <div class="page roadIn road_out">
    <sysHeader :active="'2'"></sysHeader>
    <road-out-map
      @clearSelectMarkData="clearSelectMarkData"
      :markers="markData"
      ref="sysMap"
      :selectMarkData="selectMarkData"
      @changeCenter="changeCenter"
      @getSearchMakers="getSearchMakers"
    ></road-out-map>
    <div class="roadOut_l_t" :class="moveFlag?'goleft':'backleft'">
      <div class="roadOut_l_t_box1" @click="clickTitle(1)">
        <div class="roadOut_l_t_icon1"></div>
        <div class="roadOut_l_t_num">
          <DigitRoll :rollDigits="tongji.ztccs"></DigitRoll>
        </div>
        <div class="roadOut_l_t_label">停车场总数</div>
      </div>
      <div class="roadOut_l_t_box2">
        <div class="roadOut_l_t_icon2"></div>
        <div class="roadOut_l_t_num" style="width:100px;">
          <DigitRoll :rollDigits="tongji.clsl"></DigitRoll>
        </div>
        <div class="roadOut_l_t_label">车位总数</div>
      </div>
    </div>
    <div class="roadOut_l_c" :class="moveFlag?'goleft':'backleft'">
      <div class="roadOut_l_c_title">五领域停车场数量{{this.$store.state.mes}}</div>
      <div class="roadOut_l_c_box">
        <span class="all_data_btn" @click="getMarkData">全部</span>
        <sysChart
          @changeMarkData="changeMarkData"
          :options="leftCenterOptions"
          :echart_height="'346px'"
          ref="changeType"
          @click="myChartClick($event)"
        ></sysChart>
      </div>
    </div>
    <div class="roadOut_l_b" :class="moveFlag?'goleft':'backleft'">
      <div class="common_head">
        <div
          @mouseover="hoverActive('lb',0)"
          @mouseleave="hoverLeaveActive('lb')"
          @click="changeActive('leftBottomActive',0)"
          :class="'common_item '+(lb===0||leftBottomActive===0?'active':'')"
          style="cursor: pointer;min-width: 120px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px;padding-right:20px;">宣传片一</div>
        </div>
        <div
          @mouseover="hoverActive('lb',1)"
          @mouseleave="hoverLeaveActive('lb')"
          @click="changeActive('leftBottomActive',1)"
          :class="'common_item '+(lb===1||leftBottomActive===1?'active':'')"
          style="cursor: pointer;min-width: 120px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px;padding-right:20px;">宣传片二</div>
        </div>
        <div
          @mouseover="hoverActive('lb',2)"
          @mouseleave="hoverLeaveActive('lb')"
          @click="changeActive('leftBottomActive',2)"
          :class="'common_item '+(lb===2||leftBottomActive===2?'active':'')"
          style="cursor: pointer;min-width: 125px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div
            class="common_item_title"
            style="padding-left:29px;padding-right:25px;text-align: center"
          >图片</div>
        </div>
        <!-- <div @mouseover="hoverActive('lb',2)"-->
        <!--      @mouseleave="hoverLeaveActive('lb')"-->
        <!--      @click="changeActive('leftBottomActive',2)"-->
        <!--      :class="'common_item '+(lb===2||leftBottomActive===2?'active':'')"-->
        <!--      style="cursor: pointer;">-->
        <!--     <div class="common_item_bg_l"></div>-->
        <!--     <div class="common_item_bg_c"></div>-->
        <!--     <div class="common_item_bg_r"></div>-->
        <!--     <div class="common_item_title" style="padding-left:29px;padding-right:40px;">监控实时视频</div>-->
        <!-- </div>-->
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadOut_l_b_body">
        <div class="movie_box" v-if="leftBottomActive==0">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
        <div class="movie_box" v-if="leftBottomActive==1">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptionsl"
          ></video-player>
        </div>
        <div class="img_box" style="height:255px;width:456px;" v-if="leftBottomActive===2">
          <el-carousel height="255px">
            <el-carousel-item v-for="(item,index) in imgList" :key="index" class="carousel-item">
              <!--<img  class="carousel-img" :src="item.url" alt="">-->
              <el-image style="width: 456px; height: 255px" :src="item.url" :fit="'fill'"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 新增下拉框 -->
    <div class="select_box">
      <el-select v-model="selectParkArea" placeholder="选择辖区" @change="selectAreaChange">
        <el-option v-for="item in areaList" :key="item.code" :label="item.label" :value="item.code"></el-option>
      </el-select>
    </div>
    <div class="roadOut_r_t">
      <div class="common_head">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">泊位预约</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>

      <div class="roadOut_r_t_body">
        <div class="roadOut_r_t_chart">
          <sysChart :options="rightTopOptions" :echart_height="'180px'"></sysChart>
        </div>
        <div class="roadOut_r_t_list">
          <vue-seamless-scroll
            :data="rightTableData"
            class="seamless-warp table_swiper"
            :class-option="classOption"
          >
            <div class="roadOut_r_t_item" v-for="(item,index) in rightTableData" :key="index">
              <span style="padding-right:5px;">{{item.car_num}}</span>
              <span style="padding-right:5px;">{{item.name}}</span>
              <span style="padding-right:5px;">{{item.info}}</span>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="roadOut_r_c">
      <div class="roadOut_r_c_title" @click="clickTitle(2)">计费类型占比</div>
      <div class="roadOut_r_c_body">
        <div class="roadOut_r_c_chart">
          <sysChart :options="rightCenterOptions" :echart_width="'260px'" :echart_height="'300px'"></sysChart>
        </div>
        <div class="roadOut_r_c_list">
          <div class="roadOut_r_c_item">
            <div class="roadOut_r_c_item_title">政府定价车场数量</div>
            <div class="roadOut_r_c_item_num">
              <DigitRoll :rollDigits="tongji.zfdj"></DigitRoll>
            </div>
          </div>
          <div class="roadOut_r_c_item">
            <div class="roadOut_r_c_item_title">政府指导价车场数量</div>
            <div class="roadOut_r_c_item_num">
              <DigitRoll :rollDigits="tongji.zfzdj"></DigitRoll>
            </div>
          </div>
          <div class="roadOut_r_c_item">
            <div class="roadOut_r_c_item_title">市场调节价车场数量</div>
            <div class="roadOut_r_c_item_num">
              <DigitRoll :rollDigits="tongji.sctjj"></DigitRoll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="roadOut_r_b">
      <div class="common_head" @click="clickTitle(3)">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">设备概况</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadOut_r_b_body">
        <div class="roadOut_r_b_group">
          <!-- <el-row>
                        <el-col :span="12">
                            <div :class="'roadOut_r_b_item '+(rightBottomActive===0?'active':'')" @click="changeActive('rightBottomActive',0)">
                                车位检测器
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div :class="'roadOut_r_b_item '+(rightBottomActive===1?'active':'')" @click="changeActive('rightBottomActive',1)">
                                出入口设备
                            </div>
                        </el-col>
          </el-row>-->
        </div>
        <div class="roadOut_r_b_chart">
          <sysChart :options="rightBottomOptions" :echart_height="'230px'"></sysChart>
        </div>
      </div>
    </div>
    <!-- 左侧弹框 -->
    <div class="left_model" :class="moveFlag?'leftmodelgo':'leftmodelback'">
      <div class="left_model_title">
        <span>{{model_title}}</span>
        <el-button
          @click="moveFlag=!moveFlag"
          class="model_close"
          type="primary"
          icon="el-icon-back"
          circle
        ></el-button>
      </div>
      <div class="model_content" v-if="clickTitleNum==1">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">停车场名称</div>
          <div class="model_title_item" style="color:#FF6F6F;">车位数</div>
          <div class="model_title_item" style="color:#F7B500;">停车场地址</div>
        </div>
        <ul class="model_list" v-if="markData.length>0">
          <li class="model_list_item" v-for="(item,index) in markData" :key="index">
            <span style="color:#81FF5D;">{{item.name}}</span>
            <span style="color:#FF6F6F;">{{item.all}}</span>
            <span style="color:#F7B500;">{{item.address }}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==2">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">停车场名称</div>
          <div class="model_title_item" style="color:#FF6F6F;">车位数</div>
          <div class="model_title_item" style="color:#F7B500;">类型</div>
        </div>
        <ul class="model_list" v-if="markData.length>0">
          <li class="model_list_item" v-for="(item,index) in markData" :key="index">
            <span style="color:#81FF5D;">{{item.name}}</span>
            <span style="color:#FF6F6F;">{{item.all}}</span>
            <span style="color:#F7B500;">{{item.feeType | formatFeeType }}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==3">
        <div class="model_top">
          <el-select v-model="selectArea" placeholder="选择辖区">
            <el-option
              v-for="item in areaList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select v-model="selectStatus" placeholder="选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.status"
              :label="item.label"
              :value="item.status"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="searchDeviceList">搜索</el-button>
          <el-button type="primary" @click="clearKeyWord">清除</el-button>
        </div>
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">设备名称</div>
          <div class="model_title_item" style="color:#FF6F6F;">设备状态</div>
          <div class="model_title_item" style="color:#F7B500;">设备类型</div>
        </div>
        <ul class="model_list" v-if="deviceInfoList.length>0">
          <li class="model_list_item" v-for="(item,index) in deviceInfoList" :key="index">
            <span style="color:#81FF5D;text-align:left">{{item.deviceName}}</span>
            <span style="color:#FF6F6F;">{{item.deviceStatus | formatDeviceStatus}}</span>
            <span style="color:#F7B500;">{{item.deviceType | formatDeviceType }}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sysHeader from "@/components/common/sysHeader.vue";
//import roadOutMap from "@/components/common/roadOutMap.vue";
import sysChart from "@/components/common/sysChart.vue";
import DigitRoll from "@huoyu/vue-digitroll";
import config from "@/api/config.js";
import util from "@/utils/util.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import axios from "axios";
const roadOutMap = () => import("@/components/common/roadOutMap.vue");
export default {
  name: "roadOut",
  data() {
    return {
      //是否展示
      moveFlag: false,
      selectArea: "", //下拉框选择辖区
      selectStatus: "", //下拉框选择状态
      selectParkArea: "", //下拉框选择辖区
      clickTitleNum: 0, //点击数字
      model_title: "", //弹框标题
      deviceInfoList: [], //设备列表
      rightTopInterval: undefined,
      imgList: [],
      areaList: [
        { code: "370101", label: "市辖区" },
        { code: "370102", label: "历下区" },
        { code: "370103", label: "市中区" },
        { code: "370104", label: "槐荫区" },
        { code: "370105", label: "天桥区" },
        { code: "370112", label: "历城区" },
        { code: "370113", label: "长清区" },
        { code: "370124", label: "平阴县" },
        { code: "370125", label: "济阳县" },
        { code: "370126", label: "商河县" },
        { code: "370181", label: "章丘市" },
      ],
      statusList: [
        {
          status: 0,
          label: "禁用",
        },
        {
          status: 1,
          label: "启用",
        },
        {
          status: 2,
          label: "激活",
        },
      ],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [],
        poster:
          "http://192.144.163.183:8091/upload/20200710/a_2b11380c-957d-4a9d-8831-2d8a0992011a.jpg",
        // poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerOptionsl: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [],
        // poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      rightTableData: [],
      leftCenterOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}辆",
        },
        grid: {
          top: 60,
          left: "60",
          right: 30,
        },
        xAxis: {
          data: ["交通枢纽", "人防工程", "老旧小区", "旅游景区", "医院"],
          axisLabel: {
            textStyle: {
              color: "#BFE8FF",
              lineHeight: 30,
              fontSize: 14,
              fontWeight: "bold",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
          triggerEvent: true,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(132,210,255,0.2)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#32FFB4",
              fontSize: 14,
              fontWeight: "bold",
            },
          },
        },
        series: [
          {
            name: "五领域停车场数量",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 0, 0],
              },
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,

                [
                  { offset: 0, color: "#99DFFF" },
                  { offset: 0.5, color: "#36ACFF" },
                  { offset: 1, color: "#0F5C7F" },
                ]
              ),
            },
            barWidth: "40%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#FFFFFF",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#7CDBFF" },
                    { offset: 0.5, color: "#7CDBFF" },
                    { offset: 1, color: "#0885DD" },
                  ]),
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FF7B7B" },
                    { offset: 0.5, color: "#FF7B7B" },
                    { offset: 1, color: "#AF0F0F" },
                  ]),
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#F9A35A" },
                    { offset: 0.5, color: "#F9A35A" },
                    { offset: 1, color: "#D4490A" },
                  ]),
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#6CF3B6" },
                    { offset: 0.5, color: "#6CF3B6" },
                    { offset: 1, color: "#0BAB6D" },
                  ]),
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#F8FF70" },
                    { offset: 0.5, color: "#F8FF70" },
                    { offset: 1, color: "#CD9C00" },
                  ]),
                },
              },
            ],
          },
        ],
      },
      rightTopOptions: {
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 10,
        },
        series: [
          {
            name: "预约",
            type: "gauge",
            splitNumber: 5,
            radius: "80%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.09, "#A4E5FF"],
                  [0.42, "#3CC7FF"],
                  [0.82, "#0084FE"],
                  [1, "#0034FF"],
                ],
                width: 2,
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              color: "rgba(255,255,255,0.5)",
              fontSize: 14,
              fontWeight: "bold",
              shadowColor: "#fff", //默认透明
              shadowBlur: 5,
            },
            axisTick: {
              // 坐标轴小标记
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 4,
                color: "#fff",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            pointer: {
              // 分隔线
              shadowColor: "#fff", //默认透明
              shadowBlur: 3,
              width: 3,
            },
            detail: {
              backgroundColor: "rgba(30,144,255,0)",
              borderWidth: 1,
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "#fff", //默认透明
              shadowBlur: 5,
              offsetCenter: [0, "80%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                fontSize: 32,
                color: "#BFE8FF",
              },
            },
            data: [{ value: 0, name: "" }],
          },
        ],
      },
      rightCenterOptions: {
        legend: {
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "bold",
          },
          itemWidth: 10,
          itemHeight: 10,
          bottom: 20,
          x: "center",
          data: ["政府定价", "政府指导价", "市场调节价"],
        },
        color: ["#42E0FC", "#4DB993", "#4E7CD9"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            center: ["50%", "45%"],
            radius: "50%",
            clockwise: false,
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{d}%",
              color: "#ffffff",
              fontSize: 14,
              fontWeight: "bold",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 5,
            },
            data: [
              { value: 335, name: "政府定价" },
              { value: 310, name: "政府指导价" },
              { value: 234, name: "市场调节价" },
            ],
          },
        ],
      },
      rightBottomOptions: {
        grid: {
          left: "6%",
          right: "4%",
          bottom: "30",
          top: "20",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: { show: false },
          splitLine: { show: false },
          data: ["离线（个）", "故障（个）", "在线（个）", "总数（个）"],
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(27,158,234,0.2)",
              // normal: {
              //        barBorderRadius: [0,7,7,0],
              //   }
            },
            barWidth: "40%",
            barGap: "-100%",
            barCategoryGap: "40%",
            data: [
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
            ],
            animation: false,
          },
          {
            name: "",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: 8,
              },
            },
            barWidth: "40%",
            type: "bar",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: "#9CAEBA",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#F36C6C",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#0091FF",
                },
              },
            ],
          },
        ],
      },
      leftBottomActive: 0,
      rightBottomActive: 0,
      tongji: {
        ztccs: 0,
        clsl: 0,
        zfdj: 0,
        zfzdj: 0,
        sctjj: 0,
      },
      markData: [],
      lb: 0,
      selectMarkData: [], //选择框选中的数据
    };
  },
  components: {
    sysHeader,
    //sysMap,
    roadOutMap,
    sysChart,
    DigitRoll,
    vueSeamlessScroll,
  },
  computed: {
    classOption() {
      return util.classOption;
    },
  },
  watch: {
    rightBottomActive() {
      this.getRightBottom();
    },
  },
  filters: {
    formatFeeType(val) {
      if (val == 0) {
        return "非自营";
      } else if (val == 1) {
        return "自营";
      }
    },
    formatDeviceStatus(val) {
      if (val == 0) {
        return "禁用";
      } else if (val == 1) {
        return "启用";
      } else if (val == 2) {
        return "激活";
      }
    },
    formatDeviceType(val) {
      if (val == 0) {
        return "NS中间件";
      } else if (val == 1) {
        return "机器人";
      } else if (val == 2) {
        return "应用中间件";
      } else if (val == 4) {
        return "监控中间件";
      }
    },
  },
  beforeCreate() {
    if (window.location.href.indexOf("#reloaded") == -1) {
      window.location.href = window.location.href + "#reloaded";
      window.location.reload();
    }
  },
  created() {
    //获取设备概况列表
    this.getDeviceInfoList();
  },
  mounted() {
    this.getRightTop("");
    this.getLeftTop();
    this.getLeftCenter();
    this.getRightCenter();
    this.getRightBottom();
    this.getMarkData();
    this.getConfigData();
    this.getConfigData1();
  },
  methods: {
    //选择区域改变
    selectAreaChange(e) {
      console.log("res", e);
      this.rightTableData=[]
      this.getRightTop(this.selectParkArea)
    },
    //根据辖区获取设备类表
    searchDeviceList() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getDeviceInfoList",
        data: {
          code: this.selectArea,
          deviceStatus: this.selectStatus,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          if (res.status >= 200 && res.status < 300) {
            this.deviceInfoList = res.data.data;
            //console.log("0212",response.data.data);
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
    },
    //获取设备概况列表
    getDeviceInfoList() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getDeviceInfoList",
        data: {
          code: "",
          deviceStatus: "",
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          if (res.status >= 200 && res.status < 300) {
            this.deviceInfoList = res.data.data;
            //console.log("0212",response.data.data);
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
    },
    //清除搜索内容
    clearKeyWord() {
      this.selectArea = "";
      this.selectStatus = "";
      this.getDeviceInfoList();
    },
    //点击栏目标题展示弹框及其对应数据
    clickTitle(num) {
      this.moveFlag = !this.moveFlag;
      if (num == 1) {
        this.clickTitleNum = 1;
        this.model_title = "停车场总数";
      } else if (num == 2) {
        if (this.moveFlag == true) {
          this.moveFlag = true;
        } else {
          this.moveFlag = !this.moveFlag;
        }
        this.clickTitleNum = 2;
        this.model_title = "计费类型占比";
      } else if (num == 3) {
        if (this.moveFlag == true) {
          this.moveFlag = true;
        } else {
          this.moveFlag = !this.moveFlag;
        }
        this.clickTitleNum = 3;
        this.model_title = "设备概况";
      }
    },
    myChartClick(e) {
      //console.log("0202002", e);
    },
    changeCenter({ zoom, location }) {
      /*if(zoom >= 12) {
                    this.markData = []
                    console.log('显示点信息')
                    this.getMarkData()
                } else {
                    console.log('隐藏点信息')
                    this.markData = []
                    this.$nextTick(() => {
                        this.$refs.sysMap.onHideMarker()
                    })
                    this.getMarkTongjiData()
                }*/
    },
    getMarkTongjiData() {
      this.$api.get(
        config.basePath + "park/index/statisticsParkData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            this.markData = response.data.data;
            //console.log(this.markData);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getConfigData() {
      this.$api.get(
        config.basePath + "park/index/getPromotionalVideo",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.playerOptions.sources = [
              {
                type: "video/mp4",
                src: data[0].url,
              },
            ];
            this.playerOptionsl.sources = [
              {
                type: "video/mp4",
                src: data[1].url,
              },
            ];
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getConfigData1() {
      this.$api.get(
        config.basePath + "park/index/getImgList",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.imgList = data || [];
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getMarkData() {
      this.$api.get(
        config.basePath + "park/index/markParkPoint",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            //console.log("all",response.data.data)
            this.markData = response.data.data;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    //搜索区域内的maker
    getSearchMakers(e) {
      //console.log("rodein", e);
      axios({
        method: "post",
        url: config.basePath + "park/index/getMapContent",
        data: {
          data: e,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log("成功", res);
          if (res.status >= 200 && res.status < 300) {
            this.selectMarkData = res.data.data;
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => {
          //console.log("err", err);
        });
    },
    //清空搜索区的maker
    clearSelectMarkData() {
      this.selectMarkData = [];
    },
    getRightBottom() {
      this.rightBottomOptions.series[1].data[3].value = 0;
      this.rightBottomOptions.series[1].data[2].value = 0;
      this.rightBottomOptions.series[1].data[1].value = 0;
      this.rightBottomOptions.series[1].data[0].value = 0;
      this.rightBottomOptions.series[0].data[0].value = 1000;
      this.rightBottomOptions.series[0].data[1].value = 1000;
      this.rightBottomOptions.series[0].data[2].value = 1000;
      this.rightBottomOptions.series[0].data[3].value = 1000;
      this.$api.get(
        config.basePath + "park/index/getDeviceInfo",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            let max = 0;
            for (let key in data) {
              if (max < parseInt(data[key])) {
                max = parseInt(data[key]);
              }
            }
            max = Math.floor(max / 2) + max;
            this.rightBottomOptions.series[0].data[0].value = max;
            this.rightBottomOptions.series[0].data[1].value = max;
            this.rightBottomOptions.series[0].data[2].value = max;
            this.rightBottomOptions.series[0].data[3].value = max;

            this.rightBottomOptions.series[1].data[3].value = data.total_num;
            this.rightBottomOptions.series[1].data[2].value = data.online_num;
            this.rightBottomOptions.series[1].data[1].value =
              data.breakdown_num;
            this.rightBottomOptions.series[1].data[0].value = data.offline_num;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightCenter() {
      this.$api.get(
        config.basePath + "park/index/getChargingType",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            //console.log(response)
            const data = response.data.data;
            this.rightCenterOptions.series[0].data[0].value = data.gov_price;
            this.rightCenterOptions.series[0].data[1].value = data.gov_guide;
            this.rightCenterOptions.series[0].data[2].value =
              data.market_regulation;
            this.tongji.zfdj = data.gov_price;
            this.tongji.zfzdj = data.gov_guide;
            this.tongji.sctjj = data.market_regulation;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftCenter() {
      this.$api.get(
        config.basePath + "park/index/getFiveZoneNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.leftCenterOptions.series[0].data[0].value = data.traffic;
            this.leftCenterOptions.series[0].data[1].value = data.civil_defense;
            this.leftCenterOptions.series[0].data[2].value = data.old_community;
            this.leftCenterOptions.series[0].data[3].value = data.scenic_area;
            this.leftCenterOptions.series[0].data[4].value = data.hospital;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightTop(code) {
      axios({
        method: "post",
        url: config.basePath + "park/index/getOrderParkInfo",
        data: {
          code,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log(res,'55')
          if (res.data.code==0) {
            const data = res.data.data ;
            this.rightTableData = data
            this.rightTopOptions.series[0].data[0].value =data.length ;
            // const data = res.data.data || [];
            // this.rightTableData = [].concat(...data).concat(...data);
            // this.rightTopOptions.series[0].data[0].value =
            //   res.data.data.length || 0;
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
    },
    getLeftTop() {
      this.$api.get(
        config.basePath + "park/index/getCarParkNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            this.tongji.ztccs = response.data.data.park_total_num;
            this.tongji.clsl = response.data.data.car_port_num;
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    changeTable(data) {
      data.push(data[0]); //把第一条数据插入数组最有一条
      data.shift(); //删除数组中第一条数据
    },
    playRightTopTable() {
      if (this.rightTopInterval) {
        clearInterval(this.rightTopInterval);
      }
      this.rightTopInterval = setInterval(() => {
        this.changeTable(this.rightTableData);
      }, 8000); //每两秒执行一次插入删除操作
    },
    hoverActive(key, v) {
      this[key] = v;
    },
    hoverLeaveActive(key) {
      this[key] = -1;
    },
    changeActive(key, v) {
      this[key] = v;
    },
    changeMarkData(data) {
      console.log("backData", data);
      this.markData = data;
    },
  },
};
</script>

<style scoped>
.road_out {
  overflow: hidden;
}
/* 下拉框 */
.select_box {
  position: absolute;
  right: 12px;
  top: 122px;
  width: 260px;
  z-index: 150;
  /* height: 180px; */
}
.select_box >>> .el-select {
  width: 100%;
  margin-right: 10px;
}
.select_box >>> .el-input__inner {
  color: #1fb3ff;
}
.select_box >>> .el-input .el-input__inner {
  background: #01204d;
  border: 1px solid #1fb3ff;
}
.select_box >>> .el-input ::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #1fb3ff;
}
/* 左侧弹窗 */
.left_model {
  width: 460px;
  height: 850px;
  position: absolute;
  left: -560px;
  top: 10%;
  padding: 0 12px;
  background-image: url("~@/assets/images/model_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
}
.left_model .model_content {
  width: 100%;
  /* height: 740px; */
}
.model_top >>> .el-input {
  width: 180px;
  margin-right: 10px;
}
.model_top >>> .el-input .el-input__inner {
  background: #01204d;
  border: 1px solid #1fb3ff;
}
.model_top >>> .el-input ::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #1fb3ff;
}
.model_top >>> .el-select {
  width: 120px;
  margin-right: 10px;
}
.model_top >>> .el-input__inner {
  color: #1fb3ff;
}
.model_top >>> .el-select .el-input {
  width: 100%;
}
.model_top >>> .el-select .el-input .el-select__caret {
  color: #1fb3ff;
}
.model_top >>> .el-button--primary {
  background: #01204d;
}
.left_model_title {
  position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.left_model .left_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
}
.model_title {
  width: 100%;
  height: 50px;
  border: 1px solid #1c95dc;
  margin-top: 20px;
  display: flex;
}
.model_title_item {
  flex: 1;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.model_list {
  height: 660px;
  overflow-y: scroll;
}
.model_list::-webkit-scrollbar {
  display: none;
}
.model_list .model_list_item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  justify-content: space-around;
}
.model_list .model_list_item span {
  flex: 1;
  text-align: center;
}
.roadOut_r_b_chart {
  height: 230px;
  width: 100%;
}
.roadOut_r_b {
  position: absolute;
  z-index: 100;
  height: 304px;
  width: 459px;
  right: 12px;
  bottom: 50px;
}
.roadOut_r_b_body {
  clear: both;
  width: 456px;
  height: 264px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.roadOut_r_b_group {
  height: 32px;
  line-height: 30px;
}
.roadOut_r_b_item {
  width: 70px;
  height: 30px;
  font-size: 14px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  line-height: 30px;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  margin: 0 auto;
  color: #bfe8ff;
}
.roadOut_r_b_item.active,
.roadOut_r_b_item:hover {
  cursor: pointer;
  color: #bfe8ff;
  border-bottom: 2px solid #67d6ff;
}
.roadOut_r_c {
  position: absolute;
  z-index: 100;
  height: 260px;
  width: 459px;
  right: 12px;
  top: 365px;
}
.roadOut_r_c_title {
  height: 40px;
  background-image: url("~@/assets/images/roadOut_r_c_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 40px;
  background-position: 0 0;
  padding-left: 117px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  cursor: pointer;
}
.roadOut_r_c_body {
  position: relative;
  width: 456px;
  height: 300px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.roadOut_r_c_chart {
  position: absolute;
  width: 260px;
  height: 300px;
  overflow: hidden;
}
.roadOut_r_c_list {
  position: absolute;
  right: 10px;
  top: 7px;
}
.roadOut_r_c_item {
  width: 184px;
  height: 88px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  margin-bottom: 8px;
  position: relative;
}
.roadOut_r_c_item_title {
  padding-top: 15px;
  padding-bottom: 5px;
  text-align: center;
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #bfe8ff;
  line-height: 18px;
}
.roadOut_r_c_item_num {
  width: 80px;
  margin: 0 auto;
  font-size: 24px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.roadOut_r_c_item_num .d-roll-wrapper {
  margin: -3px auto;
  height: 40px;
  overflow: hidden;
}
.roadOut_r_t {
  position: absolute;
  z-index: 100;
  height: 295px;
  width: 459px;
  right: 12px;
  top: 122px;
}
.roadOut_r_t_body {
  clear: both;
  height: 180px;
  margin-top: -1px;
  position: relative;
}

.roadOut_r_t_chart {
  width: 188px;
  height: 180px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  float: left;
}
.roadOut_r_t_item {
  height: 36px;
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #32ffb4;
  line-height: 36px;
  padding-left: 16px;
  overflow: hidden;
}
.roadOut_r_t_list .roadOut_r_t_item:nth-child(even) {
  background: rgba(50, 63, 98, 0.4);
}
.roadOut_r_t_list {
  width: 260px;
  height: 180px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  float: right;
  overflow: hidden;
}
.roadOut_l_b {
  position: absolute;
  z-index: 100;
  height: 295px;
  width: 456px;
  /* left: 12px; */
  bottom: 54px;
  transition: all 2s;
}
.roadOut_l_b_body {
  clear: both;
  position: relative;
  margin-top: -1px;
  width: 456px;
  height: 255px;
  overflow: hidden;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.roadOut_l_c {
  position: absolute;
  z-index: 100;
  height: 386px;
  width: 456px;
  /* left: 12px; */
  top: 314px;
  transition: all 2s;
}
.roadOut_l_c_title {
  height: 40px;
  padding-left: 18px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 42px;
  overflow: hidden;
  background-image: url("~@/assets/images/roadOut_l_c_bg.png");
  background-size: 284px 40px;
  background-repeat: no-repeat;
  bakcground-position: 0 0;
  position: relative;
}
.roadOut_l_c_box {
  width: 456px;
  height: 346px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  position: relative;
  margin-top: -1px;
  position: relative;
}
.roadOut_l_c_box .all_data_btn {
  position: absolute;
  right: 6%;
  top: 5%;
  z-index: 666;
  cursor: pointer;
  color: #fff;
}
.roadOut_l_t {
  position: absolute;
  z-index: 100;
  width: 458px;
  height: 168px;
  /* left: 11px; */
  top: 122px;
  transition: all 2s;
}
.roadOut_l_t_box1 {
  width: 226px;
  height: 168px;
  float: left;
  background-image: url("~@/assets/images/roadOut_l_t_1_bg.png");
  background-size: 226px 168px;
  background-repeat: no-repeat;
  /* background-position: 0 0; */
  cursor: pointer;
  position: relative;
}
.roadOut_l_t_box2 {
  width: 226px;
  height: 168px;
  float: right;
  background-image: url("~@/assets/images/roadOut_l_t_2_bg.png");
  background-size: 226px 168px;
  background-repeat: no-repeat;
  bakcground-position: 0 0;
  position: relative;
}
.roadOut_l_t_icon1 {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 50%;
  margin-left: -24px;
  top: 16px;
  background-image: url("~@/assets/images/roadOut_p.png");
  background-size: 48px 48px;
  background-repeat: no-repeat;
  bakcground-position: 0 0;
}
.roadOut_l_t_icon2 {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 50%;
  margin-left: -24px;
  top: 16px;
  background-image: url("~@/assets/images/roadOut_car.png");
  background-size: 48px 48px;
  background-repeat: no-repeat;
  bakcground-position: 0 0;
}
.roadOut_l_t_num {
  position: absolute;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  top: 60px;
  font-size: 32px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 28px;
}
.roadOut_l_t_label {
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 22px;
}
.roadOut_l_t_num >>> .d-roll-wrapper {
  margin: 8px auto;
}
>>> .el-table,
.el-table__expanded-cell {
  background: none;
}
>>> .el-table tr:hover {
  background: none;
}
>>> .el-table td,
.el-table th.is-leaf {
  border: none;
}
>>> .el-table,
>>> .el-table * {
  border: none;
}
>>> .el-table .cell {
  line-height: 28px;
  font-size: 12px;
  color: #84d2ff;
}

>>> .el-table th > .cell {
  line-height: 32px;
}
>>> .el-table .el-table__body tr:nth-child(even) {
  background: rgba(50, 63, 98, 0.2);
}
.carousel-item {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
  .carousel-img {
  max-width: 100%;
  max-height: 100%;
}
.bmView div {
  background-color: transparent !important;
}
</style>
<style>
.el-table tbody tr:hover > td {
  background: rgba(50, 63, 98, 0.3) !important;
}
.el-table td,
.el-table th {
  padding: 0;
}

.el-table th,
.el-table tr {
  background: none;
}
.el-table::before {
  height: 0;
}

.el-table * {
  border: none !important;
}
.video-js .vjs-icon-placeholder {
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
  position: absolute;
  display: block;
}
/* 视频封面 */
.vjs-poster {
  background-size: cover !important;
}
/* 左侧动画 */
.goleft {
  animation: goleft 2s linear 0.5s forwards;
  -webkit-animation: goleft 2s linear 0.5s forwards; /* Safari 和 Chrome */
}
.backleft {
  animation: backleft 2s linear 0.5s forwards;
  -webkit-animation: backleft 2s linear 0.5s forwards; /* Safari 和 Chrome */
}
/* 左侧弹框动画 */
/* .leftmodelgo{
   left:12px!important
}
.leftmodelback{
 
   left:-560px!important
}
@keyframes goleft
  {
    from {transform: translateX(0)}
    to {transform: translateX(-500px)}
  }
@keyframes backleft
  {
    from {transform: translateX(-500px)}
    to {transform: translateX(0)}
  } */
/* 右侧电话 */
/* .goright{
  animation:goright 2s linear 0.5s forwards;
  -webkit-animation:goright 2s linear 0.5s forwards; 
}
.backright{
  animation:backright 2s linear 0.5s forwards;
  -webkit-animation:backright 2s linear 0.5s forwards; 
}
@keyframes goright
  {
    from {transform: translateX(0)}
    to {transform: translateX(500px)}
  }
@keyframes backright
  {
    from {transform: translateX(500px)}
    to {transform: translateX(0)}
  } */
  .table_swiper>div>div:nth-child(2){
    display: none;
  }
</style>
